রাউট গার্ডস (Route Guards) হলো Angular-এ ব্যবহৃত একটি ফিচার, যা রাউটিংয়ের পূর্বে কোনো নির্দিষ্ট শর্ত চেক করতে ব্যবহৃত হয়। এই গার্ডস ব্যবহারের মাধ্যমে আপনি বিভিন্ন রাউটের এক্সেস নিয়ন্ত্রণ করতে পারেন। যেমন, নির্দিষ্ট রাউটের জন্য ব্যবহারকারীর অথেন্টিকেশন বা অথোরাইজেশন যাচাই করা, রাউট লোড করার আগে ডেটা ফেচ করা ইত্যাদি।

এটি অ্যাপ্লিকেশনটির নেভিগেশন ও সিকিউরিটি উন্নত করতে সাহায্য করে, কারণ আপনি নিশ্চিত করতে পারেন যে, নির্দিষ্ট শর্ত পূর্ণ না হলে ব্যবহারকারী রাউট পরিবর্তন করতে পারবে না।

রাউট গার্ডসের ধরন

Angular-এ সাধারণত ৫টি প্রধান রাউট গার্ড ব্যবহৃত হয়:

• CanActivate
• CanActivateChild
• CanDeactivate
• CanLoad
• Resolve

প্রতিটি গার্ডের কাজ আলাদা, এবং এগুলি নির্দিষ্ট পরিস্থিতিতে ব্যবহৃত হয়।

1. CanActivate

CanActivate গার্ডটি চেক করে যে, ব্যবহারকারী নির্দিষ্ট রাউটটি এক্সেস করতে পারবে কি না। এটি মূলত অথেন্টিকেশন বা অথোরাইজেশন চেক করার জন্য ব্যবহৃত হয়।

উদাহরণ:

ধরা যাক, একটি অ্যাপ্লিকেশনে শুধুমাত্র লগইন করা ব্যবহারকারীকে "Dashboard" রাউটে প্রবেশ করতে দেওয়া হবে। এই কাজটি CanActivate গার্ড দিয়ে করা যাবে।

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

এখানে:

• AuthService চেক করবে যে ব্যবহারকারী লগইন করেছে কিনা। যদি না থাকে, তাহলে ইউজারকে /login রাউটে রিডাইরেক্ট করা হবে।

রাউট কনফিগারেশন:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে canActivate গার্ড ব্যবহার করে শুধুমাত্র অথেন্টিকেটেড ইউজারদের "Dashboard" রাউটে প্রবেশ করার অনুমতি দেওয়া হয়েছে।

2. CanActivateChild

CanActivateChild গার্ডটি প্যারেন্ট রাউটের অধীনে যেকোনো চাইল্ড রাউটের এক্সেস নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি প্যারেন্ট রাউটে চেক করার পাশাপাশি চাইল্ড রাউটেও একই চেক প্রয়োগ করতে পারে।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class ChildAuthGuard implements CanActivateChild {

  constructor(private authService: AuthService, private router: Router) {}

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

রাউট কনফিগারেশন:

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivateChild: [ChildAuthGuard],
    children: [
      { path: 'settings', component: SettingsComponent }
    ]
  }
];

এখানে, ChildAuthGuard গার্ডটি শুধুমাত্র প্যারেন্ট রাউটে নয়, বরং তার অধীনস্থ চাইল্ড রাউটও সুরক্ষিত করবে।

3. CanDeactivate

CanDeactivate গার্ডটি ব্যবহার করা হয় যখন আপনি চান যে, ব্যবহারকারী কোনো রাউট থেকে চলে যাওয়ার আগে একটি নির্দিষ্ট শর্ত পূর্ণ করে কিনা তা চেক করতে। এটি সাধারণত ফর্ম বা ডেটা এডিটিং রাউটের জন্য ব্যবহৃত হয়, যেখানে আপনি চান যে, যদি ইউজার ডেটা সংরক্ষণ না করে রাউট পরিবর্তন করতে চায়, তবে তাকে সতর্ক করা হবে।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { EditComponent } from './edit/edit.component';

@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate<EditComponent> {
  canDeactivate(component: EditComponent): Observable<boolean> | Promise<boolean> | boolean {
    if (component.hasUnsavedChanges()) {
      return confirm('You have unsaved changes. Do you really want to leave?');
    }
    return true;
  }
}

রাউট কনফিগারেশন:

{ path: 'edit', component: EditComponent, canDeactivate: [CanDeactivateGuard] }

এখানে, CanDeactivateGuard গার্ড ব্যবহার করে ফর্মের ডেটা সংরক্ষণ না করার জন্য ইউজারকে সতর্ক করা হবে।

4. CanLoad

CanLoad গার্ডটি রাউট লোড হওয়ার আগে এটি চেক করে, যদি কোনো lazy-loaded মডিউল রাউট লোড করতে হয়। এটি মূলত lazy loading-এর সুরক্ষায় ব্যবহৃত হয়, যেখানে আপনি চান যে, কিছু মডিউল কেবল তখনই লোড হোক যখন প্রয়োজন হবে।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanLoad, Route, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CanLoadGuard implements CanLoad {

  constructor(private router: Router) {}

  canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean {
    const isAuthenticated = // check if user is authenticated
    if (isAuthenticated) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

রাউট কনফিগারেশন:

{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), canLoad: [CanLoadGuard] }

এখানে, CanLoadGuard গার্ডটি lazy-loaded মডিউল লোড করার আগে অথেন্টিকেশন চেক করবে।

5. Resolve

Resolve গার্ডটি কোনো নির্দিষ্ট ডেটা লোড করার জন্য ব্যবহৃত হয়, যাতে রাউট লোড হওয়ার আগে ডেটা প্রস্তুত থাকে।

উদাহরণ:

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service';

@Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<any> {

  constructor(private dataService: DataService) {}

  resolve(): Observable<any> {
    return this.dataService.getData();
  }
}

রাউট কনফিগারেশন:

{ path: 'data', component: DataComponent, resolve: { data: DataResolver } }

এখানে, DataResolver গার্ডটি ডেটা লোড করার জন্য ব্যবহৃত হয়, যাতে রাউটটি ডেটা পাওয়ার পরই লোড হয়।

সারাংশ

Angular-এ রাউট গার্ডস ব্যবহার করে আপনি রাউট এক্সেস নিয়ন্ত্রণ করতে পারেন, বিশেষত অ্যাপ্লিকেশনের নিরাপত্তা এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে। প্রতিটি গার্ডের ব্যবহার আলাদা আলাদা পরিস্থিতিতে হয়, যেমন অথেন্টিকেশন, অথোরাইজেশন, ডেটা লোড, ইউজার ইন্টারঅ্যাকশনের সময় সতর্কতা প্রদান ইত্যাদি।

রাউট গার্ড হল Angular-এর একটি বিশেষ ফিচার যা রাউটিং প্রক্রিয়ার সময় ইউজারের অ্যাক্সেস নিয়ন্ত্রণ করে। এটি নির্ধারণ করতে সাহায্য করে যে, একটি নির্দিষ্ট রাউটে নেভিগেট করার আগে ইউজারকে অনুমতি দেওয়া হবে কিনা। রাউট গার্ড মূলত নিরাপত্তা, অনুমোদন (Authorization), এবং অ্যাক্সেস কন্ট্রোলের জন্য ব্যবহৃত হয়।

Angular অ্যাপ্লিকেশনে বিভিন্ন ধরণের রাউট গার্ড রয়েছে, যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হতে পারে। এগুলি বিশেষভাবে ব্যবহারকারী অনুমতি চেক করার জন্য, ইউজার লগিন বা নির্দিষ্ট শর্ত পূরণ না করলে রাউট পরিবর্তন ব্লক করার জন্য উপকারী।

রাউট গার্ডের ধরন

Angular-এ কয়েকটি ধরণের রাউট গার্ড রয়েছে, যেগুলি ব্যবহারকারীর রাউটের প্রতি অ্যাক্সেসের নিয়ন্ত্রণ করতে সহায়তা করে। এদের মধ্যে কিছু জনপ্রিয় গার্ড হলো:

1. CanActivate
2. CanActivateChild
3. CanDeactivate
4. Resolve
5. CanLoad

1. CanActivate গার্ড

CanActivate গার্ড একটি রাউটের জন্য অ্যাক্সেস চেক করতে ব্যবহৃত হয়। এটি রাউটকে অ্যাক্সেস করার আগে ইউজারের প্রমাণীকরণ (authentication) বা অনুমোদন (authorization) চেক করতে ব্যবহৃত হয়। যদি ইউজার অনুমোদিত না হয়, তাহলে রাউটটি অ্যাক্সেস করা যাবে না।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const isAuthenticated = false; // এখানে আপনি প্রকৃত অথেনটিকেশন চেক করবেন
    if (!isAuthenticated) {
      this.router.navigate(['/login']); // যদি অনুমোদিত না হয় তবে লগইন পেজে নিয়ে যাবে
      return false;
    }
    return true;
  }
}

এখন app-routing.module.ts এ এই গার্ডটি রাউটে ব্যবহার করা হবে:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

এই কনফিগারেশনে, AuthGuard গার্ডটি /dashboard রাউটে নেভিগেট করার আগে ইউজারের অথেনটিকেশন চেক করবে।

2. CanActivateChild গার্ড

CanActivateChild গার্ড ব্যবহার হয় যখন একটি প্যারেন্ট রাউটের অধীনে বিভিন্ন চাইল্ড রাউট রয়েছে এবং আপনি চান যে, প্যারেন্ট রাউটের এক্সেস চেক করার পর চাইল্ড রাউটগুলোও চেক করা হোক।

উদাহরণ:

const routes: Routes = [
  {
    path: 'parent', component: ParentComponent, canActivateChild: [AuthGuard],
    children: [
      { path: 'child', component: ChildComponent }
    ]
  }
];

এখানে, AuthGuard প্যারেন্ট রাউটের জন্য চেক করার পর চাইল্ড রাউটগুলোর জন্যও কার্যকর হবে।

3. CanDeactivate গার্ড

CanDeactivate গার্ড ব্যবহার হয় যখন আপনি চান যে, ইউজার একটি ফর্মে কোনো পরিবর্তন করার পর রাউট পরিবর্তন করার সময় সেগুলোর অজান্তে হারিয়ে না যায়। এটি ইউজারকে একটি সতর্কতা প্রদর্শন করে এবং তাকে রাউট পরিবর্তন থেকে বিরত রাখে যদি সে কোনো অপ্রকাশিত পরিবর্তন করে।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { EditComponent } from './edit/edit.component';

@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate<EditComponent> {

  canDeactivate(component: EditComponent): Observable<boolean> | Promise<boolean> | boolean {
    if (component.form.dirty) {
      return window.confirm('You have unsaved changes, do you really want to leave?');
    }
    return true;
  }
}

এখন app-routing.module.ts এ:

const routes: Routes = [
  { path: 'edit', component: EditComponent, canDeactivate: [CanDeactivateGuard] }
];

এখানে, CanDeactivateGuard চেক করবে, যদি ফর্মে কোনো পরিবর্তন থাকে এবং ইউজার রাউট পরিবর্তন করতে চায় তবে তাকে সতর্ক করবে।

4. Resolve গার্ড

Resolve গার্ড ব্যবহার হয় রাউট লোড হওয়ার আগে ডেটা প্রিপেয়ার করতে। এটি সাধারণত সেইসব ক্ষেত্রে ব্যবহৃত হয় যখন আপনি চান যে, রাউটের জন্য কোনো ডেটা লোড হয়ে যাক তার আগে রাউটটি ব্যবহারকারীর কাছে পৌঁছাবে।

উদাহরণ:

@Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<any> {

  constructor(private dataService: DataService) {}

  resolve(): Observable<any> {
    return this.dataService.getData();
  }
}

এখন, রাউটে এই গার্ডটি যুক্ত করতে হবে:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, resolve: { data: DataResolver } }
];

এখানে, DataResolver গার্ডটি রাউট লোড হওয়ার আগে DataService থেকে ডেটা লোড করবে।

5. CanLoad গার্ড

CanLoad গার্ড ব্যবহার হয় রাউট লোড হওয়ার আগে কোনো মডিউল লোড করার অনুমতি চেক করতে। এটি সাধারণত Lazy Loading মডিউলের জন্য ব্যবহৃত হয়, যাতে নির্দিষ্ট শর্ত পূর্ণ না হলে মডিউলটি লোড না হয়।

উদাহরণ:

@Injectable({
  providedIn: 'root'
})
export class CanLoadGuard implements CanLoad {

  constructor(private authService: AuthService) {}

  canLoad(): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isAuthenticated();
  }
}

এখন এই গার্ডটি রাউটে ব্যবহার করা হবে:

const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule), canLoad: [CanLoadGuard] }
];

এখানে, CanLoadGuard গার্ডটি Lazy Loaded মডিউলটির লোড করার আগে ইউজারের অনুমোদন চেক করবে।

সারাংশ

রাউট গার্ড Angular অ্যাপ্লিকেশনে রাউটের অ্যাক্সেস কন্ট্রোলের জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি ইউজারের অথেনটিকেশন, অথোরাইজেশন এবং অন্যান্য শর্তের উপর ভিত্তি করে রাউট গন্তব্যে নেভিগেট করার অনুমতি বা অ-অনুমতি প্রদান করতে সাহায্য করে।

Angular-এ গার্ডস (Guards) হলো এমন একটি ফিচার যা রাউট পরিবর্তনের আগে কিছু শর্ত যাচাই করে। এটি ব্যবহারকারীর অ্যাপ্লিকেশনে একটি নির্দিষ্ট রাউট বা পেজে প্রবেশের অনুমতি প্রদান বা বাধা দেয়। Angular-এ বিভিন্ন ধরনের গার্ড রয়েছে, যেমন CanActivate, CanDeactivate, CanLoad, Resolve, CanActivateChild ইত্যাদি, এবং এগুলি রাউট নিরাপত্তা এবং নিয়ন্ত্রণে গুরুত্বপূর্ণ ভূমিকা পালন করে।

1. CanActivate

CanActivate গার্ডটি একটি রাউট এক্সেস করার আগে রিটার্ন করা একটি শর্ত চেক করে। যদি শর্তটি পূর্ণ হয়, তবে রাউটটি অ্যাক্সেস করা যাবে, নতুবা ব্যবহারকারী অন্য কোথাও রিডিরেক্ট হবে। এটি সাধারণত ইউজার অথেনটিকেশন বা অথোরাইজেশনের জন্য ব্যবহৃত হয়।

ব্যবহার উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    // Example: Check if user is logged in
    if (localStorage.getItem('userLoggedIn')) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

এখানে, AuthGuard গার্ডটি ইউজার যদি লগইন না করে থাকে তবে /login পেজে রিডিরেক্ট করবে।

2. CanDeactivate

CanDeactivate গার্ডটি তখন ব্যবহার করা হয় যখন একটি ব্যবহারকারী কোনো কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে যেতে চায়, এবং আপনি চাইলে তার আগে কিছু নিশ্চিতকরণ (confirmation) বা শর্ত পরীক্ষা করতে পারেন। এটি সাধারণত ফর্ম সাবমিশন বা পেজের পরিবর্তন পূর্বে কোনো সতর্কীকরণ দেখানোর জন্য ব্যবহৃত হয়।

ব্যবহার উদাহরণ:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

এখানে, CanComponentDeactivate ইন্টারফেসটি সুনির্দিষ্টভাবে canDeactivate() মেথডের জন্য কন্ট্রোল প্রদান করে, যা ফর্ম বা পেজের পরিবর্তন পূর্বে যাচাই করবে।

3. Resolve

Resolve গার্ডটি ব্যবহার করা হয় রাউটটি অ্যাক্সেস করার আগে কিছু ডেটা লোড করার জন্য। এটি একটি অ্যাসিনক্রোনাস অপারেশন যেমন HTTP রিকোয়েস্ট সম্পন্ন করার আগে রাউটটি রেন্ডার হতে দেয় না। এটি সাধারণত রাউট রিজলভ ডেটা বা সাইন-আপ/লগইন ফর্ম পূর্ণ করতে ব্যবহৃত হয়।

ব্যবহার উদাহরণ:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { DataService } from './data.service';

@Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<any> {

  constructor(private dataService: DataService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return this.dataService.fetchData();
  }
}

এখানে, DataResolver গার্ডটি ব্যবহারকারীকে একটি রাউট অ্যাক্সেস করার আগে প্রয়োজনীয় ডেটা সরবরাহ করবে (যেমন API রিকোয়েস্টের মাধ্যমে ডেটা রিটার্ন করা)।

4. CanLoad

CanLoad গার্ডটি ব্যবহার করা হয় লেজি-লোডেড মডিউল লোড হওয়ার আগে শর্ত যাচাই করার জন্য। এটি মূলত তখন ব্যবহার হয়, যখন আপনি চান শুধুমাত্র নির্দিষ্ট ইউজাররা কিছু মডিউল অ্যাক্সেস করতে পারবে। এটি মডিউল লোড করার পূর্বে শর্ত চেক করে।

ব্যবহার উদাহরণ:

import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanLoad {
  constructor(private router: Router) {}

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('userRole') === 'admin') {
      return true;
    } else {
      this.router.navigate(['/not-authorized']);
      return false;
    }
  }
}

এখানে, AdminGuard গার্ডটি নিশ্চিত করবে যে শুধুমাত্র admin রোলধারী ইউজাররা নির্দিষ্ট মডিউল লোড করতে পারবে।

5. CanActivateChild

CanActivateChild গার্ডটি মূলত একটি প্যারেন্ট রাউটের অধীনে থাকা চাইল্ড রাউটগুলোর জন্য ব্যবহৃত হয়। এটি চাইল্ড রাউটের জন্য কিছু শর্ত যাচাই করে প্যারেন্ট রাউটের অধীনে চাইল্ড রাউট এক্সেস করার অনুমতি দেয় বা বাধা দেয়।

ব্যবহার উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChildGuard implements CanActivateChild {

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // Check some condition for child route access
    return true;
  }
}

এখানে, ChildGuard গার্ডটি চেক করবে যে প্যারেন্ট রাউটের অধীনে চাইল্ড রাউট অ্যাক্সেস করা যাবে কিনা।

সারাংশ

Angular গার্ডস বিভিন্ন পরিস্থিতিতে রাউটের অ্যাক্সেস নিয়ন্ত্রণ করতে ব্যবহৃত হয়, এবং এর বিভিন্ন প্রকার (CanActivate, CanDeactivate, Resolve, CanLoad, CanActivateChild) অ্যাপ্লিকেশন নিরাপত্তা এবং ডেটা লোডিংয়ের জন্য অত্যন্ত গুরুত্বপূর্ণ। এগুলি ব্যবহারের মাধ্যমে আপনি ইউজার ইন্টারঅ্যাকশন এবং অ্যাপ্লিকেশন ফ্লো নিয়ন্ত্রণ করতে পারেন।

রাউট গার্ড (Route Guard) হল একটি শক্তিশালী Angular ফিচার যা রাউটের অ্যাক্সেস নিয়ন্ত্রণ করতে সাহায্য করে। রাউট গার্ড সাধারণত ব্যবহার করা হয় যখন আপনি চান যে কিছু রাউটে নেভিগেট করার আগে একটি নির্দিষ্ট শর্ত পূর্ণ হতে হবে, যেমন ইউজার অথেন্টিকেশন চেক বা অথরাইজেশন চেক। Angular-এ বিভিন্ন ধরনের রাউট গার্ড রয়েছে, যেমন CanActivate, CanActivateChild, CanDeactivate, CanLoad ইত্যাদি।

এখানে আমরা দেখব কিভাবে একটি CanActivate রাউট গার্ড ইমপ্লিমেন্ট করা যায়।

রাউট গার্ড কিভাবে কাজ করে?

রাউট গার্ডগুলি রাউটিং সিস্টেমে একটি বিশেষ দায়িত্ব পালন করে:

• CanActivate: রাউট অ্যাক্সেস করার আগে গার্ডটি ইউজারের অনুমতি চেক করে।
• CanDeactivate: ব্যবহারকারী যদি বর্তমান রাউটটি ছেড়ে যেতে চান, তবে গার্ডটি চেক করবে যে, তারা আসলেই রাউটটি ছাড়তে চায় কিনা।
• CanLoad: রাউটটি লোড হওয়ার আগে চেক করে।

রাউট গার্ড তৈরি করা

১. রাউট গার্ড সার্ভিস তৈরি করা: Angular CLI দিয়ে রাউট গার্ড তৈরি করতে:

ng generate guard auth

এটি একটি auth.guard.ts ফাইল তৈরি করবে, যেখানে গার্ডের লজিক থাকবে।

২. CanActivate গার্ড ইমপ্লিমেন্ট করা: CanActivate গার্ডের মাধ্যমে আপনি চেক করতে পারেন যে, ইউজার রাউট অ্যাক্সেস করতে পারবে কিনা।

auth.guard.ts:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';  // আপনার AuthService এখানে ইমপোর্ট করতে হবে

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      // এখানে আপনি আপনার AuthService ব্যবহার করে চেক করতে পারেন
      if (this.authService.isAuthenticated()) {
        return true; // যদি ইউজার অথেন্টিকেটেড থাকে, রাউট অ্যাক্সেস অনুমতি দিন
      } else {
        this.router.navigate(['/login']); // যদি ইউজার অথেন্টিকেটেড না থাকে, লগইন পেজে রিডিরেক্ট করুন
        return false;
      }
  }
}

এখানে:

• AuthService হচ্ছে একটি সার্ভিস যা ইউজারের অথেন্টিকেশন স্টেট চেক করবে (এটি আপনার অ্যাপ্লিকেশন অনুযায়ী কাস্টমাইজ করা যাবে)।
• canActivate মেথডটি যদি true রিটার্ন করে, তবে রাউট অ্যাক্সেস করা যাবে, অন্যথায় ইউজারকে অন্য পেজে রিডিরেক্ট করা হবে।

৩. রাউট কনফিগারেশনে গার্ড যুক্ত করা: একবার রাউট গার্ড তৈরি হয়ে গেলে, এটি রাউট কনফিগারেশনে যুক্ত করতে হবে।

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]  // AuthGuard যুক্ত করা হল
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• canActivate: [AuthGuard] দিয়ে রাউট গার্ড যুক্ত করা হয়েছে। এর মানে হলো, dashboard রাউট অ্যাক্সেস করতে গেলে AuthGuard প্রথমে ইউজারের অথেন্টিকেশন চেক করবে।

রাউট গার্ডের অন্যান্য ধরনের ব্যবহার

Angular-এ আরও কিছু গার্ড রয়েছে, যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হতে পারে:

• CanDeactivate: বর্তমান রাউট থেকে বের হওয়ার আগে গার্ড ব্যবহার করা হয়। এটি সাধারণত ফর্ম সাবমিশন বা ডেটা লস প্রিভেন্ট করার জন্য ব্যবহৃত হয়।

  Example:

  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    return confirm('Do you really want to leave this page?');
  }
  

• CanLoad: যখন আপনি lazy-loaded মডিউল লোড করবেন, তখন CanLoad গার্ড ব্যবহার করা হয়। এটি ব্যবহারকারীর অনুমতি চেক করে যে, তারা এই মডিউলটি লোড করতে পারবে কিনা।

  Example:

  canLoad(): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isAuthenticated();
  }
  

সারাংশ

রাউট গার্ড ব্যবহার করে আপনি Angular অ্যাপে রাউট অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন। CanActivate গার্ড ব্যবহার করে আপনি রাউট লোড হওয়ার আগে ইউজারের অনুমতি চেক করতে পারেন, যেমন ইউজার অথেন্টিকেশন চেক করা। গার্ডগুলো মূলত ইউজারের সিকিউরিটি এবং অ্যাপ্লিকেশনের ফ্লো ম্যানেজমেন্টের জন্য গুরুত্বপূর্ণ টুল হিসেবে কাজ করে।

Lazy Loading এবং Guards (গার্ডস) Angular অ্যাপ্লিকেশনের পারফরম্যান্স এবং নিরাপত্তা বাড়ানোর জন্য খুবই গুরুত্বপূর্ণ ফিচার। Lazy Loading ব্যবহার করে আপনি কেবলমাত্র প্রয়োজনীয় মডিউলগুলোকে লোড করেন, যা অ্যাপ্লিকেশনের প্রথম লোডিং টাইম কমায়। অপরদিকে, Guards ব্যবহার করে রাউটগুলির অ্যাক্সেস নিয়ন্ত্রণ করা যায়—যেমন, যদি কোন রাউট অ্যাক্সেস করার আগে কিছু শর্ত পূর্ণ না হয় তবে সেটি রোধ করা।

এখানে আমরা দেখব কীভাবে Lazy Loading এবং Guards একসাথে কাজ করে এবং অ্যাপ্লিকেশনে নিরাপত্তা এবং পারফরম্যান্স বাড়ায়।

Lazy Loading কী?

Lazy Loading হল একটি কৌশল যার মাধ্যমে আপনি অ্যাপ্লিকেশনের মডিউলগুলোকে ডাইনামিকভাবে লোড করতে পারেন। এর মাধ্যমে অ্যাপ্লিকেশনের প্রথম লোডিং সময় কমানো যায় এবং অবশিষ্ট মডিউলগুলো প্রয়োজনের সময় লোড হয়। এটি Angular অ্যাপ্লিকেশনকে আরও স্কেলেবল এবং দ্রুত কার্যকর করে।

Angular-এ Lazy Loading কিভাবে কাজ করে?

Lazy loading বাস্তবায়ন করতে, আপনি Angular রাউটিং কনফিগারেশনে মডিউলগুলোর জন্য loadChildren ব্যবহার করেন। এটি নির্দিষ্ট মডিউলকে লোড করার জন্য ওয়েবপেজের প্রথম লোডের সময় অপেক্ষা না করে, শুধুমাত্র যখন ব্যবহারকারী সেই রাউটে নেভিগেট করে তখন মডিউলটি লোড করবে।

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

এখানে feature রাউটে গিয়েই FeatureModule লোড হবে।

Guards কী?

Guards হল Angular-এর এমন ফিচার যা রাউট এর আগে কিছু শর্ত চেক করে। Guards তিন ধরনের হয়ে থাকে:

1. CanActivate: রাউটটি অ্যাক্সেস করার আগে শর্ত যাচাই করে।
2. CanActivateChild: রাউটের কোনো চাইল্ড রাউট অ্যাক্সেস করার আগে শর্ত যাচাই করে।
3. CanLoad: মডিউলটি লোড করার আগে শর্ত যাচাই করে।

Guards দিয়ে আপনি নিশ্চিত করতে পারেন যে ইউজার কোনো রাউট অ্যাক্সেস করার আগে কিছু শর্ত পূরণ করেছে, যেমন লগইন বা বিশেষ অনুমতির শর্ত।

Lazy Loading এর সাথে Guards ব্যবহার

Lazy Loading এর সাথে Guards ব্যবহার করলে আপনি অ্যাপ্লিকেশনের বিভিন্ন রাউটের জন্য নিরাপত্তা এবং অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, আপনি একটি CanActivate গার্ড ব্যবহার করতে পারেন যা শুধুমাত্র তখনই একটি লেজি লোডেড মডিউল লোড হতে দিবে যখন ব্যবহারকারী লগইন করেছে।

1. গার্ড তৈরি করা

প্রথমে Angular CLI দিয়ে গার্ড তৈরি করুন:

ng generate guard auth

এটি একটি auth.guard.ts ফাইল তৈরি করবে, যেখানে আপনি গার্ডের লজিক লিখবেন।

2. গার্ডের কোড

এখানে একটি CanActivate গার্ডের উদাহরণ দেওয়া হচ্ছে, যা চেক করবে যে ব্যবহারকারী লগইন করেছে কিনা। যদি না করে, তাহলে তাকে লগইন পেজে রিডাইরেক্ট করা হবে।

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';  // আপনার AuthService যেখানে লগইন স্টেট চেক করা হয়

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

এখানে, AuthGuard চেক করবে যে ইউজার লগইন করেছেন কিনা। যদি না করেন, তাহলে ইউজারকে /login পেজে রিডাইরেক্ট করবে।

3. গার্ডকে রাউট কনফিগারেশনে ব্যবহার করা

এখন, Lazy Loaded মডিউলের রাউট কনফিগারেশনে এই গার্ডটি যুক্ত করুন।

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule),
    canActivate: [AuthGuard]  // গার্ড যুক্ত করা হলো
  }
];

এখানে:

• canActivate প্রপার্টি ব্যবহার করা হয়েছে যাতে ইউজার শুধুমাত্র তখনই FeatureModule অ্যাক্সেস করতে পারে যখন গার্ডের শর্ত পূর্ণ হবে।

4. মডিউল কনফিগারেশন

এটি নিশ্চিত করতে হবে যে গার্ডটি শুধুমাত্র প্রয়োজনীয় সময়ই রাউট লোড করবে। উদাহরণস্বরূপ, feature.module.ts মডিউলে শুধুমাত্র যখন ইউজার অনুমতি পাবে তখনই এটি লোড হবে।

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: FeatureComponent }
    ])
  ],
  declarations: [FeatureComponent]
})
export class FeatureModule {}

সারাংশ

• Lazy Loading ব্যবহার করে অ্যাপ্লিকেশনের মডিউলগুলো প্রয়োজন অনুযায়ী লোড করা হয়, যা অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ায়।
• Guards ব্যবহার করে আপনি রাউট অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন, যেমন কেবলমাত্র লগইন করা ইউজাররা নির্দিষ্ট রাউটে যেতে পারবে।
• Lazy Loading এবং Guards একত্রে ব্যবহার করলে অ্যাপ্লিকেশনের নিরাপত্তা এবং পারফরম্যান্স আরও উন্নত হয়, এবং ডেটা ফেচিংয়ের সময় ও কম্পোনেন্ট লোডিং আরও কার্যকর হয়।

এভাবে Lazy Loading এবং Guards আপনার Angular অ্যাপ্লিকেশনে নিরাপত্তা এবং পারফরম্যান্স বাড়াতে গুরুত্বপূর্ণ ভূমিকা রাখে।